import React, {useEffect, useState} from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom'
import zh_CN from "antd/lib/locale-provider/zh_CN";
import {ConfigProvider} from "antd";
import Header from './components/Head'
import 'antd/dist/antd.css'
import Home from '@/pages/home'
import backIcon from './assets/images/backToTop.svg'
// import './iconfont.css'
import Post from "@/pages/post";
import MyHome from "@/pages/MyHome";
import './App.scss';

function App() {

  const getWindowSize = () => ({
    width: window.innerWidth,
    height: window.innerHeight
  })

  const reSize = () => {
    setSize(getWindowSize())
  }

  useEffect(() => {
    window.addEventListener(`resize`, reSize)
    return () => {
      window.removeEventListener(`resize`, reSize)
    }
  })

  const [size, setSize] = useState(getWindowSize())

  const backToTop = () => {
    const ele = document.getElementsByClassName('com-main')[0]
    const timer = setInterval(() => {
      ele.scrollTop -= 40
      if (ele.scrollTop <= 0)
        clearInterval(timer)
    }, 1)
  }

  return (
    <ConfigProvider locale={zh_CN}>
      <div className="app" style={{height: size.height}}>
        <BrowserRouter basename="/blog">
          <Header/>
          <div className="com-main">
            <div className="main">
              <Switch>
                <Route path="/home" component={Home}/>
                <Route path="/myHome" component={MyHome}/>
                <Route exact path='/post' component={Post}/>
              </Switch>
            </div>
          </div>
        </BrowserRouter>
        <div className='back-to-top' onClick={backToTop} style={{backgroundImage: `url(${backIcon})`}}/>
      </div>
    </ConfigProvider>
  );
}

export default App;
